<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>QuizMe</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/addquestion.js"></script>
    <script src="../js/simpleajax.js"></script>
    <link href="../css/close.css" rel="stylesheet">

    <link href="../include/bootstrap/css/bootstrap.css" rel="stylesheet">

</head>

<body>

    <body class="is-preload">
        <div id="page-wrapper">
            <!-- Header  导航栏 -->
            <header id="header">
                <nav id="nav" class="navbar navbar-expand-lg navbar-light bg-light">
                    <a class="navbar-brand" href="#">QuizMe</a>
                    <div class="collapse navbar-collapse" id="navbarNav">
                        <ul class="navbar-nav">
                            <li class="nav-item">
                                <a class="nav-link" href="../index.html">Home</a>
                            </li>

                            <li class="nav-item">
                                <a class="nav-link" href="../html/choose.html" style="text-decoration: none">Quiz
                                    Now</a>
                            </li>

                            <li id="login" class="nav-item">
                                <a class="nav-link" href="../html/login.html" style="text-decoration: none">Login
                                    Now</a>
                            </li>
                            <li id="login-out" class="nav-item">
                                <a class="nav-link" href="../html/logout.html" style="text-decoration: none">Login out
                                    Now</a>
                            </li>
                            <li id="profile" class="nav-item">
                                <a class="nav-link" href="../html/personal.html" style="text-decoration: none">Personal
                                    information</a>
                            </li>
                        </ul>
                    </div>

                </nav>
            </header>
            <div id="add">
                <h2 class="alert alert-secondary" style="text-align: center;">Add Question</h2>
                <div class="from-group">
                    <label>Category</label>
                    <div class="form-row">
                        <label for="old_or_new_category_select">Old or New Category?</label>
                        <div class="col">

                            <select id="old_or_new_category_select" class="form-control">
                                <option value="empty">please choose</option>
                                <option value="old">old</option>
                                <option value="new">new</option>
                            </select>
                        </div>
                        <div class="col">
                            <select id="old_category" class="form-control">

                            </select>
                            <input type="text" id="new_category" class="form-control">
                        </div>
                    </div>

                    <br>
                </div>

                <div class="form-group">
                    Difficulty
                    <select class="form-control" name="level" form="form" id="difficulty_level">
                        <option value="1">easy</option>
                        <option value="2">medium</option>
                        <option value="3">hard</option>
                    </select>
                    <br>
                </div>
                <div class="form-group">
                    PublicOrNot
                    <select name="creator" form="form" id="creator" class="form-control">
                        <option value='public'>public</option>
                        <option value='private'>private</option>
                    </select>
                    <br>
                </div>

                <div class="form-group">
                    Question
                    <textarea cols=80 rows=5 name="question" id="qst" class="form-control"></textarea>
                </div>
                <div class="form-group">
                    Answer
                    <br>
                    <input type="text" name="answer" id="ans" class="form-control">
                    <br><br>
                </div>

                <!-- <input type="submit" onclick="submit()" value="AddQuestion"> -->
                <button class="btn btn-primary" type="submit" id="submit" onclick="submit()">AddQuestion</button>
                <button class="btn btn-secondary" type="reset">Reset</button>
                <br>

            </div>
        </div>
    </body>
    <div id="footer">
        Tianjin University TIEI &copy; 2023
    </div>
</body>

</html>